<template>
  <div :style="isDark ? 'background-color: #000;' : 'background-color: #fff;'">
    <vxe-pulldown v-model="showPull" style="position: fixed;top: 10px;right: 10px;" mode="text">
      <template #default>
        <vxe-button icon="vxe-icon-arrow-down" @click="toggleEvent">Language</vxe-button>
      </template>
      <template #dropdown>
        <div>
          <div class="my-dropdown-link" @click="clickEvent('zh-CN')">中文(简体)</div>
          <div class="my-dropdown-link" @click="clickEvent('zh-HK')">中文(香港)</div>
          <div class="my-dropdown-link" @click="clickEvent('zh-TW')">中文(繁体)</div>
          <div class="my-dropdown-link" @click="clickEvent('zh-MO')">中文(澳门)</div>
          <div class="my-dropdown-link" @click="clickEvent('en-US')">英语(美国)</div>
          <div class="my-dropdown-link" @click="clickEvent('es-ES')">西班牙语(国际)</div>
          <div class="my-dropdown-link" @click="clickEvent('hu-HU')">匈牙利语</div>
          <div class="my-dropdown-link" @click="clickEvent('ja-JP')">日语</div>
          <div class="my-dropdown-link" @click="clickEvent('ko-KR')">朝鲜语</div>
          <div class="my-dropdown-link" @click="clickEvent('pt-BR')">葡萄牙语</div>
          <div class="my-dropdown-link" @click="clickEvent('ru-RU')">俄语</div>
          <div class="my-dropdown-link" @click="clickEvent('uk-UA')">乌克兰语</div>
        </div>
      </template>
    </vxe-pulldown>
    <div class="toolbar">
      <vxe-button status="primary" icon="vxe-icon-save" circle @click="exportEvent"></vxe-button>
      <vxe-button status="primary" icon="vxe-icon-setting" circle @click="openToolEvent"></vxe-button>
      <vxe-button icon="vxe-icon-sunny" circle @click="toggleTheme"></vxe-button>
      <vxe-button status="primary" icon="vxe-icon-search" circle @click="showFilter = true" />
    </div>
    <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
      <template #expand_content="{ row }">
        <div>Name：{{ row.name }}</div>
        <div>Age：{{ row.age }}</div>
      </template>
    </vxe-grid>

    <!-- 列配置弹窗 -->
    <vxe-modal v-model="showTool" type="alert" title="列配置" showFooter width="1200px" @confirm="ToolClick">
      <template #default>
        <vxe-table :data="gridOptions.columns" show-overflow :edit-config="editToolConfig">
          <vxe-column field="title" title="标题" :edit-render="{ name: 'input' }"></vxe-column>
          <vxe-column field="width" title="宽度" :edit-render="{ name: 'input' }"></vxe-column>
          <vxe-column field="align" title="对齐方式" :edit-render="{
            name: 'select',
            options: [{ label: '', value: '' }, { label: '左侧', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '右侧', value: 'right' }]
          }"></vxe-column>
          <vxe-column field="headerAlign" title="表头对齐方式" :edit-render="{
            name: 'select',
            options: [{ label: '', value: '' }, { label: '左侧', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '右侧', value: 'right' }]
          }"></vxe-column>
          <vxe-column field="footerAlign" title="表尾对齐方式" :edit-render="{
            name: 'select',
            options: [{ label: '', value: '' }, { label: '左侧', value: 'left' },
            { label: '居中', value: 'center' },
            { label: '右侧', value: 'right' }]
          }"></vxe-column>
          <vxe-column field="fixed" title="冻结列" :edit-render="{
            name: 'select',
            options: [{ label: '', value: '' }, { label: '左侧', value: 'left' },
            { label: '右侧', value: 'right' }]
          }"></vxe-column>
        </vxe-table>
      </template>
    </vxe-modal>
    <!-- 操作提示 -->
    <div class="message" v-if="false">
      <p style="min-width: 100%; text-indent: 2em;">" | Arrow Up ↑ | 移动到当前活动单元格上面的单元格 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Arrow Down ↓ | 移动到当前活动单元格下面的单元格 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Arrow Left ← | 移动到当前活动单元格左边的单元格 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Arrow Right → | 移动到当前活动单元格右边的单元格 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Tab | 移动到当前选中或活动单元格的右侧单元格，如果到最后一列且存在下一行，则从下一行开始移动 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Tab + Shift | 移动到当前选中或活动单元格的左侧单元格，如果到第一列且存在上一行，则从上一行开始移动 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Spacebar | 如果单元格是复选框或单选框则切换勾选状态 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Enter | 取消编辑并移动到当前活动单元格下面的单元格 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Delete | 清空内容 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Backspace | 清空内容并激活选中单元格为编辑状态 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | F2 | 激活单元格编辑 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Esc | 取消单元格编辑 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Page Up | 向上翻页滚动 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Page Down | 向下翻页滚动 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | Home | 滚动到顶部 |。"</p>
      <p style="min-width: 100%; text-indent: 2em;">" | End | 滚动到底部 |。"</p>
    </div>

    <!-- 高级搜索弹窗 -->
    <vxe-modal v-model="showFilter" type="alert" title="高级筛选" showFooter width="1200px" @confirm="filterConfirm">
      <template #default>
        <div class="dialog-header">
          <div>
            <vxe-button-group>
              <vxe-button status="primary" @click="addFilterRule">新增筛选</vxe-button>
              <vxe-button status="primary" @click="resetFilter">重置条件</vxe-button>
            </vxe-button-group>
          </div>
          <div>
            <vxe-button-group>
              <vxe-button status="primary" @click="saveFilter(0)">保存方案</vxe-button>
              <vxe-button status="primary" @click="saveFilter(2)">另存方案</vxe-button>
            </vxe-button-group>

            <vxe-select style="margin-left: 10px;" v-model="selectedFilterIndex" @change="selectFilter"
              placeholder="选择方案">
              <vxe-option v-for="(item, index) in filterConfigurations" :key="index" :label="item.name"
                :value="index" />
            </vxe-select>
          </div>
        </div>

        <vxe-table ref="filterTableRef" :data="filterRules" style="width: 100%" :row-config="{ keyField: 'fieldCount' }"
          :tree-config="treeConfig" :column-config="columnConfig">
          <vxe-column field="field" title="列名" tree-node>
            <template #default="{ row }">
              <vxe-select v-model="row.field" @change="handleFieldChange(row)">
                <vxe-option v-for="col in filteredColumns" :key="col.field" :label="col.title" :value="col.field" />
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="operator" title="比较运算符">
            <template #default="{ row }">
              <vxe-select v-model="row.operator" :disabled="!row.field" @change="handleOperatorChange(row)">
                <vxe-option label="等于" value="eq" v-if="['number', 'string', 'date'].includes(row.type)" />
                <vxe-option label="不等于" value="ne" v-if="['number', 'string', 'date'].includes(row.type)" />
                <vxe-option label="大于" value="gt" v-if="['number', 'date'].includes(row.type)" />
                <vxe-option label="大于或等于" value="ge" v-if="['number', 'date'].includes(row.type)" />
                <vxe-option label="小于" value="lt" v-if="['number', 'date'].includes(row.type)" />
                <vxe-option label="小于或等于" value="le" v-if="['number', 'date'].includes(row.type)" />
                <vxe-option label="介于" value="between" v-if="row.type === 'date'" />
                <vxe-option label="不介于" value="notBetween" v-if="row.type === 'date'" />
                <vxe-option label="包含" value="like" v-if="row.type === 'string'" />
                <vxe-option label="不包含" value="notLike" v-if="row.type === 'string'" />
                <vxe-option label="以…开始" value="likeLeft" v-if="row.type === 'string'" />
                <vxe-option label="以…结束" value="likeRight" v-if="row.type === 'string'" />
                <vxe-option label="空" value="isNull" v-if="row.type === 'string'" />
                <vxe-option label="非空" value="isNotNUll" v-if="row.type === 'string'" />
                <vxe-option label="在列表之中" value="in" v-if="['number', 'string'].includes(row.type)" />
                <vxe-option label="不在列表之中" value="notIn" v-if="['number', 'string'].includes(row.type)" />
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="value" title="值">
            <template #default="{ row }">
              <template v-if="!['in', 'notIn'].includes(row.operator)">
                <vxe-input v-if="row.type === 'string'" v-model="row.value" :disabled="!row.field" />
                <vxe-input v-if="row.type === 'number'" v-model="row.value" type="number" :disabled="!row.field" />
                <vxe-date-range-picker v-if="row.type === 'date' && ['between', 'notBetween'].includes(row.operator)"
                  v-model="row.value" type="date" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                <vxe-date-picker v-if="row.type === 'date' && !['between', 'notBetween'].includes(row.operator)"
                  v-model="row.value" type="date" />
              </template>
              <vxe-select v-else v-model="row.value" multiple :options="row.inList || []" />
            </template>
          </vxe-column>
          <vxe-column field="logic" title="逻辑运算符">
            <template #default="{ row }">
              <vxe-select v-model="row.logic" :disabled="!row.field">
                <vxe-option label="并且" value="and" />
                <vxe-option label="或者" value="or" />
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="160">
            <template #default="{ row }">
              <vxe-button status="primary" icon="vxe-icon-add" @click="addChildFilter(row)" />
              <vxe-button status="primary" icon="vxe-icon-minus" @click="removeFilter(row)" />
            </template>
          </vxe-column>
        </vxe-table>
      </template>
    </vxe-modal>

    <!-- 保存筛选方案弹窗 -->
    <vxe-modal v-model="showSaveFilter" type="alert" title="请为该规则添加一个名字" showFooter @confirm="confirmSaveFilter">
      <template #default>
        <vxe-input v-model="filterName" placeholder="请输入方案名称" />
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive, computed, nextTick } from 'vue'
import { VxeUI } from 'vxe-table'
import type { VxeGridProps } from 'vxe-table'

// 定义组件属性
const props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  tableConfig: {
    type: Object,
    required: true
  },
  ifForm: {
    type: Boolean,
    default: false
  }
})

// 创建过滤后的列数组
const filteredColumns = computed(() => {
  return props.tableConfig.columns.filter((column: { type: string }) => 
    !['seq', 'checkbox', 'expand'].includes(column.type)
  )
})

// 定义组件事件
const emit = defineEmits(['filter', 'search', 'reset'])

const filterTableRef = ref()

interface FilterRule {
  id: number
  parentId: number | null
  logic: string
  field: string
  operator: string
  value: string | number | any[]
  fieldCount: number
  type: string
  filters?: FilterRule[]
  hasChildren?: number
}

const gridRef = ref()
const gridOptions = reactive<VxeGridProps>({
  border: true,
  showFooter: true,
  showOverflow: true,
  keepSource: true,
  mouseConfig: {
    selected: true
  },
  keyboardConfig: {
    isEdit: true,
    isArrow: true,
    isEnter: true,
    isTab: true,
    isDel: true,
    isBack: true,
    isEsc: true,
    editMode: 'insert',
    isLastEnterAppendRow: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    showStatus: true
  },
  exportConfig: {
    filename() {
      return `导出文件名${Date.now()}`
    },
    sheetName() {
      return `导出标题${Date.now()}`
    },
    excludeFields: [
      'seq',
      'checkbox',
      'expand'
    ]
  },
  // 搜索配置
  formConfig: props.ifForm ? {
    data: props.tableConfig.columns.reduce((acc:any, col:any) => {
      if (col.field) {
        acc[col.field] = ''
      }
      return acc
    }, {}),
    items: [
      ...props.tableConfig.columns
        .filter((col: { field: any; title: any }) => col.field && col.title)
        .map((col: { field: any; title: any; editRender: any }) => ({
          field: col.field,
          title: col.title,
          itemRender: col.editRender || { name: 'VxeInput' }
        })),
      {
        itemRender: {
          name: 'VxeButtonGroup',
          options: [
            { type: 'submit', content: '搜索', status: 'primary' },
            { type: 'reset', content: '重置' }
          ]
        }
      }
    ]
  } : undefined,
  columns: props.tableConfig.columns,
  data: props.tableData,
  footerData: props.tableConfig.footerData
})
const exportEvent = () => {
  gridOptions.columns = filteredColumns.value
  ToolClick()
  const $grid = gridRef.value
  if ($grid) {
    $grid.openExport()
  }
  // 屏蔽然后展示，绕过导出不能设置字段的缺陷
  nextTick(() => {
    gridOptions.columns = props.tableConfig.columns
    ToolClick()
  })
}

// 表头的返回
const gridEvents = {
  formSubmit(params: any) {
    emit('search', params)
  },
  formReset(params: any) {
    emit('reset', params)
  }
}

// 打开列布局
const showTool = ref(false)
const openToolEvent = () => {
  showTool.value = true
}
const editToolConfig = ref({
  trigger: 'click' as 'click' | 'manual' | 'dblclick',
  mode: 'cell' as 'cell' | 'row'
})

// 触发列配置修改
const ToolClick = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.loadColumn(gridOptions.columns)
  }
}

// 语言配置
import zhCN from 'vxe-table/lib/locale/lang/zh-CN' // 中文(简体)
import zhHK from 'vxe-table/lib/locale/lang/zh-HK' // 中文(香港)
import zhTW from 'vxe-table/lib/locale/lang/zh-TW' // 中文(繁体)
import zhMO from 'vxe-table/lib/locale/lang/zh-MO' // 中文(澳门)
import enUS from 'vxe-table/lib/locale/lang/en-US' // 英语(美国)
import esES from 'vxe-table/lib/locale/lang/es-ES' // 西班牙语(国际)
import huHU from 'vxe-table/lib/locale/lang/hu-HU' // 匈牙利语
import jaJP from 'vxe-table/lib/locale/lang/ja-JP' // 日语
import koKR from 'vxe-table/lib/locale/lang/ko-KR' // 朝鲜语
import ptBR from 'vxe-table/lib/locale/lang/pt-BR' // 葡萄牙语
import ruRU from 'vxe-table/lib/locale/lang/ru-RU' // 俄语
import ukUA from 'vxe-table/lib/locale/lang/uk-UA' // 乌克兰语

// 注册语言
VxeUI.setI18n('zh-CN', zhCN)
VxeUI.setI18n('zh-HK', zhHK)
VxeUI.setI18n('zh-TW', zhTW)
VxeUI.setI18n('zh-MO', zhMO)
VxeUI.setI18n('en-US', enUS)
VxeUI.setI18n('es-ES', esES)
VxeUI.setI18n('hu-HU', huHU)
VxeUI.setI18n('ja-JP', jaJP)
VxeUI.setI18n('ko-KR', koKR)
VxeUI.setI18n('pt-BR', ptBR)
VxeUI.setI18n('ru-RU', ruRU)
VxeUI.setI18n('uk-UA', ukUA)
// 下拉切换语言
const showPull = ref(false)
const i18Lang = ref('zhCN')
const toggleEvent = () => {
  showPull.value = !showPull.value
}
const clickEvent = (num: any) => {
  showPull.value = false
  i18Lang.value = num
  // 切换指定语言
  VxeUI.setLanguage(num)
}

// 主题切换相关
const isDark = ref(false)
const toggleTheme = () => {
  isDark.value = !isDark.value
  VxeUI.setTheme(isDark.value ? 'dark' : 'light')
}

// 高级筛选相关
const showFilter = ref(false)
const showSaveFilter = ref(false)
const filterName = ref('')
const selectedFilterIndex = ref()
const filterRules = ref<FilterRule[]>([])
interface FilterConfiguration {
  name: string
  rules: FilterRule[]
}

const filterConfigurations = ref<FilterConfiguration[]>([])
// 从本地存储加载筛选配置
const loadFilterConfigurations = () => {
  const storedConfig = localStorage.getItem('tableFilters')
  if (storedConfig) {
    filterConfigurations.value = JSON.parse(storedConfig)
  }
}

const columnConfig = reactive({
  resizable: true
})
const treeConfig = reactive({
  transform: true,
  rowField: 'id',
  parentField: 'parentId',
})

// 添加筛选规则
const addFilterRule = () => {
  filterRules.value.push({
    id: Date.now(),
    parentId: null,
    logic: 'and',
    field: '',
    operator: '',
    value: '',
    fieldCount: Date.now(),
    type: 'string'
  })
}

// 重置筛选条件
const resetFilter = () => {
  filterRules.value = []
}

// 处理字段变更
const handleFieldChange = (row: { field: string | undefined; type: string; value: string; operator: string }) => {
  const column = gridOptions.columns?.find(col => col.field === row.field)
  if (column) {
    row.type = column.type || 'string'
    row.value = ''
    row.operator = ''
  }
}

// 处理运算符变更
const handleOperatorChange = (row: { operator: string; value: string | never[] | null; type: string }) => {
  if (['between', 'notBetween'].includes(row.operator)) {
    row.value = []
  } else if (row.type === 'string') {
    row.value = ''
  } else if (row.type === 'number') {
    row.value = null
  }
}

// 添加子筛选规则
const addChildFilter = (row: any) => {
  const record = {
    id: Date.now(),
    parentId: row.id,
    logic: 'and',
    field: '',
    operator: '',
    value: '',
    fieldCount: Date.now(),
    type: 'string'
  }
  filterRules.value.push(record)
  // filterTableRef.value.insert(record)
  console.log(row, filterRules.value)
}

// 移除筛选规则
const removeFilter = (row: any) => {
  if (row.hasChildren) {
    const parent = filterRules.value.find(r => r.fieldCount === row.hasChildren)
    if (parent && parent.filters) {
      parent.filters = parent.filters.filter(f => f.fieldCount !== row.fieldCount)
    }
  } else {
    filterRules.value = filterRules.value.filter(r => r.fieldCount !== row.fieldCount)
  }
}

// 选择筛选方案
const selectFilter = () => {
  if (selectedFilterIndex.value !== undefined) {
    filterRules.value = JSON.parse(JSON.stringify(filterConfigurations.value[selectedFilterIndex.value].rules))
  }
}

// 保存筛选方案
const saveFilter = (type: number) => {
  if (type === 2) {
    showSaveFilter.value = true
  } else if (type === 0) {
    if (selectedFilterIndex.value !== undefined) {
      filterConfigurations.value[selectedFilterIndex.value].rules = JSON.parse(JSON.stringify(filterRules.value))
      localStorage.setItem('tableFilters', JSON.stringify(filterConfigurations.value))
    } else {
      showSaveFilter.value = true
    }
  }
}

// 确认保存筛选方案
const confirmSaveFilter = () => {
  if (filterName.value) {
    const newConfig = {
      name: filterName.value,
      rules: JSON.parse(JSON.stringify(filterRules.value))
    }
    filterConfigurations.value.push(newConfig)
    localStorage.setItem('tableFilters', JSON.stringify(filterConfigurations.value))
    showSaveFilter.value = false
    filterName.value = ''
  }
}

// 确认筛选
const filterConfirm = () => {
  const filterConfig = {
    logic: 'and',
    field: '',
    operator: '',
    value: '',
    filters: filterRules.value
  }
  // 触发筛选事件
  emit('filter', filterConfig)
  showFilter.value = false
}

// 初始化时加载筛选配置
loadFilterConfigurations()
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 6px;
}

.my-dropdown-link {
  min-width: 100%;
  cursor: pointer;
}

.message {
  color: #999;
  font-size: 14px;
  text-align: left;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vxe-select {
  width: 120px;
}

.vxe-input {
  width: 200px;
}
</style>